<h2>Why is this an issue?</h2>
<p>The <code>font-family</code> (and the shorthand <code>font</code>) CSS property specifies a prioritized list of one or more font family names
and/or generic family names for the selected element.</p>
<p>If none of the font names defined in a <code>font</code> or <code>font-family</code> declaration are available on the browser of the user, the
browser will display the text using its default font. It’s recommended to always define a generic font family for each declaration of
<code>font</code> or <code>font-family</code> to get a less degraded situation than relying on the default browser font. This lets the browser select
an acceptable fallback font when necessary.</p>
<p>The list of generic font families is as follows:</p>
<ul>
  <li> <code>serif</code>: Glyphs have finishing strokes, flared or tapering ends, or actual serifed endings. </li>
  <li> <code>sans-serif</code>: Glyphs have plain stroke endings. </li>
  <li> <code>cursive</code>: Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic
  typefaces. </li>
  <li> <code>fantasy</code>: Fantasy fonts are primarily decorative fonts that contain playful representations of characters. </li>
  <li> <code>monospace</code>: All glyphs have the same fixed width. </li>
  <li> <code>system-ui</code>: Glyphs are taken from the default user interface font on a given platform. </li>
  <li> <code>ui-serif</code>: The default user interface serif font. </li>
  <li> <code>ui-sans-serif</code>: The default user interface sans-serif font. </li>
  <li> <code>ui-monospace</code>: The default user interface monospace font. </li>
  <li> <code>ui-rounded</code>: The default user interface font that has rounded features. </li>
</ul>
<h2>How to fix it</h2>
<p>You should always include at least one generic family name in a <code>font-family</code> list, since there’s no guarantee that any given font is
available.</p>
<h3>Code examples</h3>
<h4>Noncompliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
a {
  font-family: Helvetica, Arial, Verdana, Tahoma; /* Noncompliant; there is no generic font family in the list */
}
</pre>
<h4>Compliant solution</h4>
<pre data-diff-id="1" data-diff-type="compliant">
a {
  font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
}
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> CSS Specification - <a href="https://www.w3.org/TR/CSS2/fonts.html#generic-font-families">Generic font families</a> </li>
  <li> MDN - <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family"><code>font-family</code></a> </li>
  <li> MDN - <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font"><code>font</code></a> </li>
</ul>
